<template>
  <div class="root" :style="{ height: height + 'px' }" @contextmenu.prevent="aboutContextmenu">
    <el-carousel
      style="width:100%;height:100%"
      height="100%"
      v-bind:style="{ 'background': getBackground }"
    >
      <el-carousel-item v-for="(layoutItem, i) in sortLayout" :key="i">
        <div class="slide" style="width:100%;height:100%">
          <grid-layout
            class="gridlayout"
            :layout.sync="layoutItem.SlideContent"
            :col-num="18"
            :row-height="slideRowHeight"
            :is-draggable="false"
            :is-resizable="false"
            :vertical-compact="false"
            :preventCollision="false"
            :margin="[0, 0]"
            :use-css-transforms="false"
            style="height:100%"
          >
            <grid-item
              v-for="item in layoutItem.SlideContent"
              class="insideGridShow"
              :x="item.x"
              :y="item.y"
              :w="item.w"
              :h="item.h"
              :i="item.i"
              :key="item.i"
            >
              <div
                class="insideContent"
                v-bind:style="{ 'border-width': item.itemBorder.width  + 'px', 'border-style': item.itemBorder.type, 'border-color': item.itemBorder.color, 'border-radius': item.itemBorder.radius + 'px', 'box-sizing': 'border-box' }"
                style="width:100%;height:100%"
              >
                <show :itemContent="item.itemContent"></show>
              </div>
            </grid-item>
          </grid-layout>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import Show from '@/components/Show/Show.vue'

export default {
  data () {
    return {
      height: 500
    }
  },
  components: {
    Show
  },
  methods: {
    getHeight () {
      this.height = window.innerHeight
    },
    aboutContextmenu () {
      this.$contextmenu({
        items: [
          {
            label: '退出浏览',
            icon: 'el-icon-back',
            divided: true,
            onClick: () => {
              this.$router.push('/')
            }
          },
          {
            label: '播放模式',
            icon: 'el-icon-video-play',
            divided: true,
            onClick: () => {
              this.$router.push('/play')
            }
          }
        ],
        event,
        customClass: 'class-a',
        zIndex: 300,
        minWidth: 80
      })
      return false
    }
  },
  created () {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  destroyed () {
    window.removeEventListener('resize', this.getHeight)
  },
  computed: {
    sortLayout () {
      return JSON.parse(JSON.stringify(this.$store.getters.sortLayout))
    },
    getBackground () {
      return this.$store.getters.getBackground
    },
    slideRowHeight () {
      return this.height / 18
    }
  }
}
</script>

<style scoped>
/* .root {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .gridlayout {
      width:100%;
      height:100%;
    } */
</style>
<style>
/* button.el-carousel_button {
    padding: 1px 10px
  } */
</style>
